<template>
  <div id="page-bid-detail" class="container">
    <div class="nav-title">当前位置：首页 - 标讯详情</div>
    <main class="content">
      <div class="top">
        <h1 id="title" style="font-family: Microsoft YaHei">
          {{ bidInfo.title }}
        </h1>
        <div class="fllow-title">
          <span
            v-if="bidInfo.projectDate"
            style="font-family: Microsoft YaHei"
            v-html="jiamiProjectInfo(bidInfo.projectDate)"
          >
            <!-- {{ bidInfo.projectDate }} -->
          </span>
          <a
            v-if="bidInfo.pageUrl"
            :href="bidInfo.pageUrl"
            rel="nofollow"
            target="_blank"
          >
            查看原文
          </a>
        </div>
      </div>
      <div class="main">
        <!-- <strong> -->
        <ul class="tags-list project-tags">
          <li class="item tag-color-1" v-if="bidInfo.announcementTypeName">
            <strong>{{ bidInfo.announcementTypeName }}</strong>
          </li>
          <li class="item tag-color-1" v-if="bidInfo.purchaseTypeName">
            <strong>{{ bidInfo.purchaseTypeName }}</strong>
          </li>
          <li
            style="font-family: Microsoft YaHei"
            class="item tag-color-1"
            v-if="bidInfo.projectCode"
            v-html="jiamiProjectInfo(bidInfo.projectCode)"
          >
            <!-- {{ bidInfo.projectCode }} -->
          </li>
          <li class="item tag-color-2" v-if="bidInfo.province">
            <strong>{{ bidInfo.province }}</strong>
          </li>
          <li class="item tag-color-2" v-if="bidInfo.companyName">
            <strong>{{ bidInfo.companyName }}</strong>
          </li>
          <li
            style="font-family: Microsoft YaHei"
            class="item tag-color-2"
            v-if="bidInfo.companyContact || bidInfo.companyTel"
            v-html="
              jiamiProjectInfo(
                bidInfo.companyContact
                  ? bidInfo.companyContact
                  : '' + ' ' + bidInfo.companyTel
                  ? ' ' + bidInfo.companyTel
                  : ''
              )
            "
          >
            <!-- {{ bidInfo.companyContact ? bidInfo.companyContact : '' }}{{ bidInfo.companyTel ? ' ' + bidInfo.companyTel : '' }} -->
          </li>
          <li class="item tag-color-2" v-if="bidInfo.purchaserName">
            <strong>{{ bidInfo.purchaserName }}</strong>
          </li>
          <li
            class="item tag-color-3"
            v-for="item2 in bidInfo.esItemAis"
            :key="item2.item1Code"
            v-show="item2.item1Name"
          >
            <strong>{{ item2.item1Name }}</strong>
          </li>
          <li
            style="font-family: Microsoft YaHei"
            class="item tag-color-4"
            v-if="bidInfo.bidMoney"
            v-html="jiamiNumber('中标', bidInfo.bidMoney / 1000000)"
          >
            <!-- 中标 {{ bidInfo.bidMoney / 1000000 + '万元' }} -->
          </li>
          <li
            style="font-family: Microsoft YaHei"
            class="item tag-color-4"
            v-if="bidInfo.budgetMoney"
            v-html="jiamiNumber('预算', bidInfo.budgetMoney / 1000000)"
          >
            <!-- 预算 {{ bidInfo.budgetMoney / 1000000 + '万元' }} -->
          </li>
          <li class="item tag-color-5" v-if="bidInfo.agencyName">
            <strong>{{ bidInfo.agencyName }}</strong>
          </li>
          <li
            style="font-family: Microsoft YaHei"
            class="item tag-color-5"
            v-if="bidInfo.agencyContact || bidInfo.agencyTel"
            v-html="
              jiamiProjectInfo(
                bidInfo.agencyContact
                  ? bidInfo.agencyContact
                  : '' + ' ' + bidInfo.agencyTel
                  ? ' ' + bidInfo.agencyTel
                  : ''
              )
            "
          >
            <!-- {{ bidInfo.agencyContact ? bidInfo.agencyContact : '' }}{{ bidInfo.agencyTel ? ' ' + bidInfo.agencyTel : '' }} -->
          </li>
          <li class="item tag-color-6" v-if="bidInfo.winningBidder">
            <strong>{{ bidInfo.winningBidder }}</strong>
          </li>
        </ul>
        <!-- </strong> -->

        <section
          style="font-family: Microsoft YaHei"
          class="detail"
          v-html="
            jiamiProjectInfo(addStyle(utils.htmlRestore(bidInfo.content)))
          "
          v-if="bidInfo.content"
        >
          <!-- {{}} -->
        </section>
      </div>
      <section
        class="relevant-bid-wrap"
        v-if="bidInfo.relativeBidList && bidInfo.relativeBidList.length > 0"
      >
        <div class="relevant-bid-title">
          <i class="col"></i><span>相关标讯</span>
        </div>
        <ul class="relevant-bid-list">
          <li :key="item.id" v-for="item in bidInfo.relativeBidList">
            <nuxt-link :to="`/detail/${item.id}`">
              <span class="bid-title">{{ item.title }}</span>
              <span class="bid-date" v-if="item.projectDate">{{
                item.projectDate.substr(0, 10)
              }}</span>
            </nuxt-link>
          </li>
        </ul>
      </section>
    </main>
  </div>
</template>

<script>
import { request } from "@/plugins/httpSever";
// import { addStyle } from "../../../plugins/font.js"
// import utils from "../../../plugins/utils"

export default {
  asyncData(context) {
    // Universal keys
    const {
      app,
      store,
      route,
      params,
      query,
      env,
      isDev,
      isHMR,
      redirect,
      error,
      $config,
      $axios
    } = context;
    // Server-side
    if (process.server) {
      const { req, res, beforeNuxtRender } = context;
    }
    // Client-side
    if (process.client) {
      const { from, nuxtState } = context;
    }

    const promise = new Promise((resolve, reject) => {
      request
        .queryBidDetail({
          id: params.id
        })
        .then(
          res => {
            if (res.status == 200) {
              resolve(res.data || {});
              // document.querySelector('#front-home-box').scrollTop = 0;
            } else {
              reject(res.message);
            }
          },
          err => {
            console.log(err);
            reject(err);
          }
        );
    });

    return promise.then(
      res => {
        // console.log("sssssssssss", res);
        return {
          bidInfo: res
        };
      },
      err => {
        return {};
      }
    );
  },
  validate({ params }) {
    // 必须是number类型
    return /^\d+$/.test(params.id);
  },
  head() {
    let itemStr = "";
    if (this.bidInfo.esItemAis) {
      this.bidInfo.esItemAis.forEach(item => {
        itemStr += item.item1Name + ",";
      });
    }

    itemStr = itemStr.substr(0, itemStr.length - 1);
    let tempProvince = this.bidInfo.province
      ? this.bidInfo.province
      : "标讯详情";
    let tempPurchaseTypeName = this.bidInfo.purchaseTypeName
      ? this.bidInfo.purchaseTypeName
      : "";
    let tempAnnouncementTypeName = this.bidInfo.announcementTypeName
      ? this.bidInfo.announcementTypeName
      : "";
    let tempProjectName = this.bidInfo.projectName
      ? this.bidInfo.projectName
      : "";
    let keywordsContent = `${tempPurchaseTypeName},${tempAnnouncementTypeName},${tempProjectName},${tempProvince}`;
    return {
      // title: `${this.bidInfo.title}${this.utils.defaultTitleEnd}`,
      title: `${this.bidInfo.title}_${tempProvince}_${itemStr}`,
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          // content: `${this.bidInfo.projectName},${this.bidInfo.purchaseTypeName},${this.bidInfo.announcementTypeName},${itemStr},标讯详情,易找标,正福易找标,易找标${this.utils.defaultTitleEnd}`
          content: keywordsContent
        },
        {
          hid: "description",
          name: "description",
          // content: this.bidInfo.pureContent
          content: this.bidInfo.projectInfo
        }
      ]
    };
  },
  data() {
    return {
      bidInfo: {},
      fontMicrosoftYaHei: [
        "&#x5539;",
        "&#x5535;",
        "&#x555C;",
        "&#x558c;",
        "&#x558d;",
        "&#x558e;",
        "&#x558f;",
        "&#x5590;",
        "&#x5591;",
        "&#x5592;"
      ]
    };
  },
  watch: {
    $route(e) {
      console.log(e);
      /*if (e.params.id !== this.bidInfo.id) {
                this.requestQueryBidDetail();
            }*/
    }
  },
  created() {},
  mounted() {
    document.querySelector("#front-home-box").scrollTop = 0;
    // 加密数字
    this.utils.addStyle();
  },
  methods: {
    addStyle(el) {
      let elTemp = el.replace(
        /<span/g,
        '<span style="font-family: Microsoft YaHei ;" '
      );
      elTemp = elTemp.replace(
        /<font/g,
        '<font style="font-family: Microsoft YaHei;" '
      );
      elTemp = elTemp.replace(
        /<p/g,
        '<p style="font-family: Microsoft YaHei;" '
      );
      elTemp = elTemp.replace(
        /<td/g,
        '<td style="font-family: Microsoft YaHei;" '
      );

      elTemp = elTemp.replace(
        /<div style=\"/g,
        '<div style="font-family: Microsoft YaHei; '
      );
      // elTemp = elTemp.replace(/<samp style=\"/g, "<samp style=\"font-family: Microsoft YaHei; ")
      elTemp = elTemp.replace(
        /<samp/g,
        '<samp style="font-family: Microsoft YaHei;"'
      );
      elTemp = elTemp.replace(/<a/g, '<a rel="nofollow"');
      // elTemp = elTemp.replace(/font-family:.*?;/g, "font-family: Microsoft YaHei; ")
      return elTemp;
    },
    hrefJiami() {},
    // 加密数字
    jiamiNumber(text, itemData) {
      let itemTemp = itemData.toString().split("");
      let newNumber = [];
      itemTemp.forEach(item => {
        if (item === ".") {
          item = item;
        } else {
          item = this.fontMicrosoftYaHei[Number(item)];
        }
        newNumber.push(item);
      });
      let newTemp = newNumber.join("");
      return text + "  " + newTemp + "万元";
    },
    // 加密日期中的数字
    jiamiProjectDate(itemData) {
      let itemTemp = itemData.split("");
      let newNumber = [];
      itemTemp.forEach(item => {
        if (item === "-") {
          item = item;
        } else {
          item = this.fontMicrosoftYaHei[Number(item)];
        }
        newNumber.push(item);
      });
      let newTemp = newNumber.join("");
      return newTemp;
    },
    // 加密内容中的数字
    jiamiProjectInfo(itemData) {
      let hrefTemp = itemData.replace(/href="(.*?)"/g, match => {
        // console.log("------------match------",match);
        return match.replace(
          /(1)|(2)|(3)|(4)|(5)|(6)|(7)|(8)|(9)|(0)/g,
          match1 => {
            if (match1 == 0) {
              return "〇";
            } else if (match1 == 1) {
              return "①";
            } else if (match1 == 2) {
              return "②";
            } else if (match1 == 3) {
              return "③";
            } else if (match1 == 4) {
              return "④";
            } else if (match1 == 5) {
              return "⑤";
            } else if (match1 == 6) {
              return "⑥";
            } else if (match1 == 7) {
              return "⑦";
            } else if (match1 == 8) {
              return "⑧";
            } else if (match1 == 9) {
              return "⑨";
            }
          }
        );
      });
      let tagTemp1 = hrefTemp.replace(/<h(.*?)>/g, match => {
        return match.replace(
          /(1)|(2)|(3)|(4)|(5)|(6)|(7)|(8)|(9)|(0)/g,
          match1 => {
            if (match1 == 0) {
              return "〇";
            } else if (match1 == 1) {
              return "①";
            } else if (match1 == 2) {
              return "②";
            } else if (match1 == 3) {
              return "③";
            } else if (match1 == 4) {
              return "④";
            } else if (match1 == 5) {
              return "⑤";
            } else if (match1 == 6) {
              return "⑥";
            } else if (match1 == 7) {
              return "⑦";
            } else if (match1 == 8) {
              return "⑧";
            } else if (match1 == 9) {
              return "⑨";
            }
          }
        );
      });
      let tagTemp2 = tagTemp1.replace(/<\/h(.*?)>/g, match => {
        console.log("-----------------sad-adasd-asd-----------", match);
        return match.replace(
          /(1)|(2)|(3)|(4)|(5)|(6)|(7)|(8)|(9)|(0)/g,
          match1 => {
            if (match1 == 0) {
              return "〇";
            } else if (match1 == 1) {
              return "①";
            } else if (match1 == 2) {
              return "②";
            } else if (match1 == 3) {
              return "③";
            } else if (match1 == 4) {
              return "④";
            } else if (match1 == 5) {
              return "⑤";
            } else if (match1 == 6) {
              return "⑥";
            } else if (match1 == 7) {
              return "⑦";
            } else if (match1 == 8) {
              return "⑧";
            } else if (match1 == 9) {
              return "⑨";
            }
          }
        );
      });
      let itemTemp = tagTemp2.replace(
        /(1)|(2)|(3)|(4)|(5)|(6)|(7)|(8)|(9)|(0)/g,
        match => {
          if (match == 0) {
            return "&#x5539;";
          } else if (match == 1) {
            return "&#x5535;";
          } else if (match == 2) {
            return "&#x555C;";
          } else if (match == 3) {
            return "&#x558c;";
          } else if (match == 4) {
            return "&#x558d;";
          } else if (match == 5) {
            return "&#x558e;";
          } else if (match == 6) {
            return "&#x558f;";
          } else if (match == 7) {
            return "&#x5590;";
          } else if (match == 8) {
            return "&#x5591;";
          } else if (match == 9) {
            return "&#x5592;";
          }
        }
      );
      let newTemp = itemTemp.replace(
        /(①)|(②)|(③)|(④)|(⑤)|(⑥)|(⑦)|(⑧)|(⑨)|(〇)/g,
        match => {
          if (match == "〇") {
            return 0;
          } else if (match == "①") {
            return 1;
          } else if (match == "②") {
            return 2;
          } else if (match == "③") {
            return 3;
          } else if (match == "④") {
            return 4;
          } else if (match == "⑤") {
            return 5;
          } else if (match == "⑥") {
            return 6;
          } else if (match == "⑦") {
            return 7;
          } else if (match == "⑧") {
            return 8;
          } else if (match == "⑨") {
            return 9;
          }
        }
      );
      return newTemp;
    },
    requestQueryBidDetail() {
      document.querySelector("#front-home-box").scrollTop = 0;
      this.$request
        .queryBidDetail({
          id: this.$route.query.id
        })
        .then(
          res => {
            // console.log("--dadadadadaddaddddddadadad----", res);
            if (res.status == 200) {
              this.bidInfo = res.data ? res.data : {};
              console.log("--dadadadadaddaddddddadadad----", this.bidInfo);
            } else {
              this.requestError(res.status, res.message);
            }
          },
          err => {
            console.log(err);
            this.requestFail(err);
          }
        );
    }
  }
};
</script>

<style scoped lang="less">
.container {
  .min-width(1200px);
  background-color: #f5f5fb;
  padding-bottom: 30px;

  .nav-title {
    .width(1200px);
    .center(auto-x);
    .fz(14px);
    .lh(55px);
  }

  .content {
    .size(1200px, auto);
    .center(auto-x);
    background-color: #ffffff;
    padding-bottom: 20px;

    .top {
      padding: 40px 40px 28px;
      border-bottom: 1px solid #e6e6e6;

      h1 {
        .fz(28px);
      }

      .fllow-title {
        .fz(16px);
        .color(#888888);
        margin-top: 27px;
      }
    }

    .main {
      padding: 0 40px;
      ul.tags-list {
        margin-left: -10px;
        margin-top: 20px;

        & > li {
          strong {
            font-weight: normal;
          }
          margin-left: 10px;
          margin-top: 10px;
        }
      }
    }

    .relevant-bid-wrap {
      .relevant-bid-title {
        line-height: 60px;
        padding-left: 40px;
        .color(@main-color);

        i {
          display: inline-block;
          .size(3px, 17px);
          background-color: @main-color;
          margin-right: 10px;
          vertical-align: middle;
        }

        span {
          vertical-align: middle;
        }
      }

      ul.relevant-bid-list {
        line-height: 60px;

        li {
          .clearfix;
          padding: 0 40px;
          border-top: 1px solid #e6e6e6;

          .bid-title {
            display: block;
            .width(1000px);
            //.max-width(1000px);
            .fl;
            .ellipsis;
          }

          .bid-date {
            .fr;
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
#page-bid-detail {
  .main {
    .detail {
      .fz(18px) !important;
      line-height: 30px !important;
      font-weight: normal !important;
      margin-top: 50px;
      overflow: hidden;

      table {
        .center(auto-x) !important;
      }

      table,
      p,
      div,
      ul,
      ol,
      li {
        .max-width(100%) !important;
      }
    }
  }
}
</style>
